import React, { useState, useRef, useEffect, Suspense } from "react";

function EndCom() {
  const endRef = useRef();
  const [Com, SetCom] = useState(null);
  useEffect(() => {
    console.log(endRef.current, "endRef.current");
    const ob = new IntersectionObserver((entries) => {
      const entry = entries[0];
      if (entry.isIntersecting) {
        const res = React.lazy(() => import("./complexCom"));
        SetCom(res);
      }
    });
    ob.observe(endRef.current);
  }, []);

  return (
    <div ref={endRef}>
      <Suspense>
        {!Com ? (
          <div
            style={{ height: "200px", width: "100%", backgroundColor: "red" }}
          >
            endCom
          </div>
        ) : (
          <Com />
        )}
      </Suspense>
    </div>
  );
}

export default EndCom;
